﻿@model Drempelvrij.UI.Web.ViewModels.ParkeerPlaatsenViewModel

@{
    ViewBag.Title = "Invalide Parkeerplaatsen Rotterdam Centrum";
}

<h1 class="page-title">Invalide Parkeerplaatsen Rotterdam Centrum</h1>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(51.917829,4.480784),
                zoom: 14,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);  

            @for (var i = 0; i < Model.latLngCoordinates.Length; i++)
            {
                @Html.Raw("addMarker(" + Model.latLngCoordinates[i] + ", '"+Model.straten[i]+"' , '"+Model.huisnummers[i] + "'); \n");
            }

            function addMarker(x, y, straat, nummer) {
                var location = new google.maps.LatLng(x, y);
                var marker = new google.maps.Marker({
                    position: location,
                    map: map,
                });

                marker.setClickable(true);
                marker.setTitle('Parkeerplaats rolstoelgebruikers.');

                var infoWindow = new google.maps.InfoWindow({
                    content: 'Parkeerplaats rolstoelgebruikers: ' + straat + ' ' + nummer,
                });

                google.maps.event.addListener(marker, 'click', function() {
                    infoWindow.open(map, marker);
                });
            }
             
        } google.maps.event.addDomListener(window, 'load', initialize);
    </script>

<div id="map" style="width:100%; height:600px;" />